<template>
  <div>
    <ep-main-layout>

      <div slot="left" class="mLeft">
        <module-title title="集聚指数" path="/assembleInfo" :title-popshow="true" :table-data="jjzspopdata"></module-title>
        <div class="flex pd20">
          <div style="width:280px;height:280px">
            <r-text style="margin:20px" text="产业集聚"></r-text>
            <industry-number label="产业企业：" unit="家" :count="jjzs.cyqy"></industry-number>
            <industry-number style="margin-top:20px" label="规上企业：" unit="家" :count="jjzs.gsqy" :popshow="true"></industry-number>
            <industry-number style="margin-top:20px" label="横店影院：" unit="个" :count="jjzs.hdyy"></industry-number>

          </div>
          <div style="flex:1;text-align:center">
            <r-text style="margin:20px" text="人力资源集群"></r-text>
            <guage-chart style="width:246px;height:175px" id="chart1" :data="jjzs.ysrczb"></guage-chart>
            <div style="padding-top:8px">当月注册群演：<span style="color:#64E6E2">{{jjzs.dyzcqy}}</span>人</div>
          </div>
        </div>
        <div class="dashDivider"></div>
        <div class="pd20" style="padding-bottom: 30px">
          <r-text style="margin:20px" text="剧组集聚"></r-text>
          <div class="flex" style="align-items: center">
            <div style="padding-left:20px">
              <jz-info :data="jzInfo.ljjzs" unit="个" :icon="require('../assets/yjjzs.svg')" label="接待剧组数"></jz-info>
              <jz-info style="margin-top:20px" :data="jzInfo.ljjzrs" unit="人" :icon="require('../assets/yjjzrs.svg')" label="接待剧组人数"></jz-info>
            </div>
            <div class="progressbox" style="flex:1; margin-left:20px; margin-right:20px;">
              <div class="progresscontent" v-for="(item,index) in jzjjdudata" :key="index">
                <div class="flexbetween txtbox"><p>{{item.name}}</p><p><span>{{item.value}}</span></p></div>
                <div class="progressbarbox"><div class="progressbarcur"  :style="{'width':item.percent+'%'}"></div> </div>
              </div>
            </div>
<!--            <ring-chart id="chart2" :data="jzInfo" style="width:246px;height:202px;margin-left:45px"></ring-chart>-->
          </div>
        </div>
      </div>
      <div slot="center">
        <div class="center_top">
          <center-text :data="videoTalent" title="影视人才" type="1"></center-text>
          <center-text :data="totalInfo" title="整体情况" type="2"></center-text>

          <div class="img"  @mouseover="showTooltip = true" @mouseout="showTooltip = false" @mousedown="showWarn = true" style="z-index: 9"></div>
          <div class="side"></div>
          <div class="number">
            <div class="value">{{rlzyfzzs}}</div>
            <div class="label" style="position: relative" @mouseenter="ismainshow=true" @mouseleave="ismainshow=false">人力资源协同发<br/>展指数<span class="tooltipbox" style="position: absolute; right:-20px; top:20px;"></span></div>
            <div class="popbox" v-if="ismainshow">
              <h2>说明</h2>
              <div class="popcontent">
                <p>集聚指数*集聚权重+紧缺指数*紧缺权重+活跃指数*活跃权重</p>
              </div>
            </div>
          </div>
          <div style="margin-top:70px;">
          <center-text :data="videoEconomy" title="影视经济" type="3"></center-text>
          <center-text :data="totalInfo2" title="整体情况" type="4"></center-text>
          </div>
        </div>
      </div>
      <div slot="right">
        <module-title title="紧缺指数" path="/lackInfo" :title-popshow="true" :table-data="jqdspopdata" left-p="50"></module-title>
        <div class="right_top" @click="openDialog">
          <div style="padding:20px"><r-text style="" text="专业人员紧缺"></r-text></div>
          <professional-info :data="professionalInfo"></professional-info>
        </div>
        <el-dialog title="中国影视人才交流大会参会企业" :visible.sync="visible" width="600px" :modal="false" destroy-on-close>
            <div class="wrapper">
                <table border="1px solid #ccc">
                    <thead>
                      <tr class="center">
                          <th style="width: 50px;">序号</th>
                          <th style="width: 300px;">企业名称</th>
                          <th style="width: 200px;">岗位</th>
                          <th style="width: 80px;">需求人数</th>
                      </tr>
                    </thead>
                    <tr class="center"  v-for="(item, index) in pageData" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.company }}</td>
                        <td>{{ item.job }}</td>
                        <td>{{ item.num }}</td>
                    </tr>
                </table>
                <div class="pagination">
                    <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="handlePageChange"></el-pagination>
                </div>
            </div>
        </el-dialog>
        <div class="dashDivider"></div>
        <div class="flexbetween" style="padding:20px 20px 0 20px">
          <div>
            <r-text text="群众演员紧缺"></r-text>
            <div class="flex qyjqdbox" style="align-item:center; margin-top:20px;">
              <div class="group_info">
                <div style="padding-top:10px;">群演总数</div>
                <div class="total"></div>
                <div style="padding-top:25px">月均群演需求数</div>
                <div class="value" style="font-size:20px;color:#FFF">{{yjqyxq}}</div>
                <div class="ratio" :style="{'--ratio': ratio + '%'}"></div>
              </div>
            </div>
          </div>
          <div>
            <r-text text="配套人员紧缺"></r-text>
            <div class="txtbox"><p>配套人员紧缺：<span class="bluekey">{{ptryjq}}</span><b>人</b></p></div>
            <div class="rjfwbox"><h2>{{rjfw}}</h2><p>人均服务人数 (月均) </p></div>
          </div>
        </div>

      </div>
    </ep-main-layout>
    <div style="width:100%; height:300px; position: absolute; bottom:10px; left:0">
      <module-title title="活跃指数" :title-popshow=true style="margin-top:20px" path="/activeInfo"
                    :table-data="hyzspopdata"
                    left-p="30"
                    top-p="-600"
      ></module-title>
      <div class="flexbetween" style="padding: 20px;">
        <div class="bottomsidebox">
          <r-text text="人才供需"></r-text>
          <div class="flexbetween">
            <div class="subbox">
              <h2>人才需求</h2>
              <div class="progressbox">
                <div class="progresscontent" v-for="(item,index) in hyzsdata.rcxqdata" :key="index">
                  <div class="txtbox"><p>{{item.name}}</p></div>
                  <div class="flexbetween"  style="align-items: center">
                    <div class="progressbarbox" style="width:60%"><div class="progressbarcur" :style="{'width':item.percent+'%'}"></div> </div>
                    <div class="txtbox" style="flex: 1"><p><span class="bluekey">{{item.value}}</span><b>人</b></p></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="subbox">
              <h2>人才招引</h2>
              <div class="progressbox">
                <div class="progresscontent" v-for="(item,index) in hyzsdata.rcgqdata" :key="index">
                  <div class="txtbox"><p>{{item.name}}</p></div>
                  <div class="flexbetween" style="align-items: center">
                    <div class="progressbarbox" style="width:60%"><div class="progressbarcur orange" :style="{'width':item.percent+'%'}"></div> </div>
                    <div class="txtbox" style="flex: 1; margin-left: 10px;"><p><span class="bluekey">{{item.value}}</span><b>人</b></p></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottommidbox">
          <r-text text="人才结构"></r-text>
           <div class="flexbetween">
             <div class="subbox">
               <h2>学历结构</h2>
               <div class="chartbox yzjzbox" >
                 <div ref="xlchart" id="xlchart" style="width:100%; height:140px"></div>
                 <div class="yzjzcircle"></div>
               </div>
             </div>
             <div class="subbox">
               <h2>年龄结构</h2>
               <div class="flexbetween">
                 <div class="progressHbox">
                   <div class="progressHcontent" v-for="(item,index) in hyzsdata.nlchartdata" :style="{'height':item.percent+'%'}"></div>
                 </div>
                 <div class="listledbox">
                     <div class="listledcontent" v-for="(item,index) in hyzsdata.nlchartdata" :key="index">
                       <p>{{item.name}}</p><p><span>{{item.value}}</span><b>人</b></p><p><span>{{item.percent}}%</span></p>
                     </div>
                 </div>
                 <div>

                 </div>
               </div>
             </div>
           </div>
        </div>
        <div class="bottomsidebox">
          <r-text text="发展环境"></r-text>
          <div class="flexbetween">
            <div class="subbox">
              <h2>人才政策</h2>
              <div class="progressbox">
                <div class="progresscontent" v-for="(item,index) in hyzsdata.rczcdata" :key="index">
                  <div class="txtbox"><p>{{item.name}}</p></div>
                  <div class="flexbetween"  style="align-items: center">
                    <div class="progressbarbox" style="width:60%"><div class="progressbarcur orange"  :style="{'width':item.percent+'%'}"></div> </div>
                    <div class="txtbox" style="flex: 1"><p><span class="bluekey">{{item.value}}</span><b>{{ item.unit }}</b></p></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="subbox">
              <h2>人才服务</h2>
              <div class="progressbox">
                <div class="progresscontent" v-for="(item,index) in hyzsdata.rcfwdata" :key="index">
                  <div class="txtbox"><p>{{item.name}}</p></div>
                  <div class="flexbetween" style="align-items: center">
                    <div class="progressbarbox" style="width:60%"><div class="progressbarcur" :style="{'width':item.percent+'%'}"></div> </div>
                    <div class="txtbox" style="flex: 1; margin-left: 10px;"><p><span class="bluekey">{{item.value}}</span><b>{{ item.unit }}</b></p></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <video autoplay muted loop src="../assets/mainvideo.mp4" class="videobg">
    </video>
    <tooltip :show="showTooltip" :data="tooltipData"></tooltip>
    <warn-dialog :show.sync="showWarn" :data="warnData"></warn-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
import EpMainLayout from '@/components/EpMainLayout.vue';
import ModuleTitle from '@/components/ModuleTitle.vue';
import RText from '../components/RText.vue';
import IndustryNumber from '../components/IndustryNumber.vue';
import GuageChart from '../components/GuageChart.vue';
import JzInfo from '../components/JzInfo.vue';
import RingChart from '../components/RingChart.vue';
import Jjyc from '../components/Jjyc.vue';
import CenterText from '../components/CenterText.vue';
import ActiveInfoModoule from '../components/ActiveInfoModoule.vue';
import ProfessionalInfo from '../components/ProfessionalInfo.vue';
import SupportInfo from '../components/SupportInfo.vue';
import Tooltip from '../components/Tooltip.vue';
import WarnDialog from '../components/WarnDialog.vue';
import * as echarts from "echarts";
import { result } from './js/home.js'
export default {
  components: {
    EpMainLayout,
    ModuleTitle,
    RText,
    IndustryNumber,
    GuageChart,
    JzInfo,
    RingChart,
    Jjyc,
    CenterText,
    ActiveInfoModoule,
    ProfessionalInfo,
    SupportInfo,
    Tooltip,
    WarnDialog
  },
  data() {
    return {
      // 弹窗显隐标记
      visible: false,
      // 每页条数
      pageSize: 20,
      // 列表总数
      total: result.length,
      // 当前数据列表
      pageData: [],

      ismainshow:false,
      gsqyshow:false,
      //聚集指数的表格弹窗数据
      jjzspopdata:{
        title:'聚集指数：各指标实际得分*分类权重*指标权重累加',
        value:[
          {
            type: '产业集聚',
            name: '企业数',
            flqz: '0.2',
            zbqz: '0.1',
            jzz: '80%',
            jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
          },
          {
            type: '产业集聚',
            name: '横店出品数',
            flqz: '0.2',
            zbqz: '0.5',
            jzz: '80%',
            jfgz: '基准值为去年同期值的百分比，当前值除以去年值小于基准值时：当前值*80/(去年值*基准值)；大于基准每大1%加1分到100分为值'
          },
          {
            type: '产业集聚',
            name: '规上企业数',
            flqz: '0.2',
            zbqz: '0.2',
            jzz: '80%',
            jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
          },
          {
            type: '产业集聚',
            name: '横店影院数',
            flqz: '0.2',
            zbqz: '0.1',
            jzz: '80%',
            jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
          },
          {
            type: '产业集聚',
            name: '影视制作企业占比',
            flqz: '0.2',
            zbqz: '0.1',
            jzz: '80%',
            jfgz: '基准值为去年视制作企业占比值的百分比，影视制作企业占比小于去年占比乘以基准值时：当前值*80/（去年值*基准值）；大于基准每大1%加1分到100分为值'
          },
          {
            type: '剧组集聚',
            name: '剧组数',
            flqz: '0.4',
            zbqz: '0.4',
            jzz: '80%',
            jfgz: '基准值为去年同期值的百分比，当前值除以去年值小于基准值时：当前值*80/(去年值*基准值)；大于基准每大1%加1分到100分为值'
          },
          {
            type: '剧组集聚',
            name: '剧组人数',
            flqz: '0.4',
            zbqz: '0.3',
            jzz: '80%',
            jfgz: '基准值为去年同期值的百分比，当前值除以去年值小于基准值时：当前值*80/(去年值*基准值)；大于基准每大1%加1分到100分为值'
          },
          {
            type: '剧组集聚',
            name: '内景使用饱和度',
            flqz: '0.4',
            zbqz: '0.1',
            jzz: '80%',
            jfgz: '基准值为去年平均使用饱和度的百分比，使用率在基准值乘以去年平均使用饱和度上下5%范围内的为满分，没低于或高于该范围1%减一分'
          },
          {
            type: '剧组集聚',
            name: '签约外景使用饱和度',
            flqz: '0.4',
            zbqz: '0.1',
            jzz: '80%',
            jfgz: '基准值为去年平均使用饱和度的百分比，使用率在基准值乘以去年平均使用饱和度上下5%范围内的为满分，没低于或高于该范围1%减一分'
          },
          {
            type: '剧组集聚',
            name: '摄影棚使用饱和度',
            flqz: '0.4',
            zbqz: '0.1',
            jzz: '80%',
            jfgz: '基准值为去年平均使用饱和度的百分比，使用率在基准值乘以去年平均使用饱和度上下5%范围内的为满分，没低于或高于该范围1%减一分'
          },
          {
            type: '人力资源集聚',
            name: '专业人才数',
            flqz: '0.4',
            zbqz: '0.2',
            jzz: '80%',
            jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
          },
          {
            type: '人力资源集聚',
            name: '配套人员数',
            flqz: '0.4',
            zbqz: '0.2',
            jzz: '80%',
            jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
          },
          {
            type: '人力资源集聚',
            name: '今年累计新增群演数',
            flqz: '0.4',
            zbqz: '0.4',
            jzz: '80%',
            jfgz: '基准值为去年同期到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
          },
          {
            type: '人力资源集聚',
            name: '人才流入流出数比值',
            flqz: '0.4',
            zbqz: '0.2',
            jzz: '80%',
            jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
          },

        ],
      },
      // 紧缺度的表格弹窗数据
      jqdspopdata:{
        title:'紧缺指数：各指标实际得分*分类权重*指标权重累加',
        value:[
          {
            type: '专业人员紧缺',
            name: '专业人员紧缺度降低率',
            flqz: '0.1',
            zbqz: '1',
            jzz: '',
            jfgz: '紧缺度=需求数/（需求数+存量数），计算公式=（年前紧缺度-当前紧缺度）*100/(年前紧缺度*月份/12），大于100分得分为100'
          },
          {
            type: '群众演员紧缺',
            name: '一级群演满足度',
            flqz: '0.6',
            zbqz: '0.2',
            jzz: '',
            jfgz: '今年未满足群演需求月份占比乘以100'
          },
          {
            type: '群众演员紧缺',
            name: '二级群演满足度',
            flqz: '0.6',
            zbqz: '0.2',
            jzz: '',
            jfgz: '今年未满足群演需求月份占比乘以100'
          },
          {
            type: '群众演员紧缺',
            name: '三级群演满足度',
            flqz: '0.6',
            zbqz: '0.2',
            jzz: '',
            jfgz: '今年未满足群演需求月份占比乘以100'
          },
          {
            type: '群众演员紧缺',
            name: '四级群演满足度',
            flqz: '0.6',
            zbqz: '0.2',
            jzz: '',
            jfgz: '今年未满足群演需求月份占比乘以100'
          },
          {
            type: '群众演员紧缺',
            name: '五级群演满足度',
            flqz: '0.6',
            zbqz: '0.2',
            jzz: '',
            jfgz: '今年未满足群演需求月份占比乘以100'
          },
          {
            type: '配套人员紧缺',
            name: '配套人员月均服务人数',
            flqz: '0.3',
            zbqz: '1',
            jzz: '80%',
            jfgz: '今年值除以去年值等于基准值80分，高于基准值1%减1分，低于基准值1%加1分满分100'
          },

        ],
      },
      // 活跃指数标题弹窗数据
      hyzspopdata:{
        title:'活跃指数：各指标实际得分*分类权重*指标权重累加',
        value:[
            {
                type: '人才需求',
                name: '专业人员需求数',
                flqz: '0.4',
                zbqz: '0.2',
                jzz: '100%',
                jfgz: '今年人才需求占去年人才需求数乘以基准值的百分比，当比值为1得分80，每低于1%减1分到0分为止，高1%加1分到100为止'
            },
            {
                type: '人才需求',
                name: '配套人员需求数',
                flqz: '0.4',
                zbqz: '0.2',
                jzz: '100%',
                jfgz: '今年人才需求占去年人才需求数乘以基准值的百分比，当比值为1得分80，每低于1%减1分到0分为止，高1%加1分到100为止'
            },
            {
                type: '人才需求',
                name: '群演需求数',
                flqz: '0.4',
                zbqz: '0.6',
                jzz: '80%',
                jfgz: '今年人才需求占去年人才需求数乘以基准值的百分比，当比值为1得分80，每低于1%减1分到0分为止，高1%加1分到100为止'
            },
          {
            type: '人才招引',
            name: '专业人员供需平衡度',
            flqz: '0.2',
            zbqz: '0.2',
            jzz: '',
            jfgz: '累计入职数占预计解决需求数比，n代表入职人数，m代码月份，X代表需求数：100*(n/(x*m/12))，n>x*m/12=100分'
          },
          {
            type: '人才招引',
            name: '配套人员供需平衡度',
            flqz: '0.2',
            zbqz: '0.2',
            jzz: '',
            jfgz: '累计入职数占预计解决需求数比，n代表入职人数，m代表月份，X代表需求数：100*(n/(x*m/12))，n>x*m/12=100分'
          },
            {
                type: '人才招引',
                name: '群演人均工作天数',
                flqz: '0.2',
                zbqz: '0.6',
                jzz: '80%',
                jfgz: '今年人均工作天数占去年人均工作天数乘以基准值的百分比，当比值为1得分80，每低于1%减1分到0分为止，高1%加1分到100为止'
            },
            {
                type: '人才服务',
                name: '群演工伤参保率',
                flqz: '0.1',
                zbqz: '0.3',
                jzz: '',
                jfgz: '群演工伤参保率*100'
            },
          {
            type: '人才服务',
            name: '人才招聘会次数',
            flqz: '0.1',
            zbqz: '0.7',
            jzz: '80%',
            jfgz: '基准值为去年同期人才招聘会次数的百分比，今年招聘会次数小于去年招聘会次数乘以基准值时：当前值*80/（去年值*基准值）；大于基准时，当前值/（去年值*基准值）每比100%大1%加1分到100分为值'
          },
          {
            type: '人才政策',
            name: '人才政策惠及率',
            flqz: '0.2',
            zbqz: '0.4',
            jzz: '',
            jfgz: '基准值为金华平均人才政策惠及率，人才政策惠及率=补贴人数/参保人数。达到基准值80分，每超过0.1%加4分，每少于0.1%减4分'
          },
            {
                type: '人才政策',
                name: '引进人才数量',
                flqz: '0.2',
                zbqz: '0.6',
                jzz: '100%',
                jfgz: '今年引进人才数量占去年同期引进人才数量乘以基准值的百分比，当比值为1得分80，每低于1%减1分到0分为止，高1%加1分到100为止'
            },
          {
            type: '人才结构',
            name: '专业人员本科以上人才占比',
            flqz: '0.1',
            zbqz: '0.5',
            jzz: '100%',
            jfgz: '当前本科人才占比等于去年占比乘以基准值得80分，占比每提高1%加4分，每降低1%减4分'
          },
          {
            type: '人才结构',
            name: '专业人员30岁以下人才占比',
            flqz: '0.1',
            zbqz: '0.5',
            jzz: '100%',
            jfgz: '当前30岁以下人才占比等于去年占比乘以基准值得80分，占比每提高1加4分，每降低1减4分'
          },

        ],
      },
      jjzs: {
        cyqy: 0,
        gsqy: 0,
        hdyy: 0,
        //ysrczb: Math.floor(Math.random() * 80 + 20),
          ysrczb:0,
        dyzcqy: 0
      },
      jzjjdudata:[
          {name:'实景数(个)',value:443,percent:75},
          {name:'签约外景(个)',value:31,percent:10},
          {name:'摄影棚数(个)',value:117,percent:20}
          ],
      /*jjyc: {
        cyjjqs: [{
                name: '2018',
                value: 0,
                value2: 0
            },{
                name: '2019',
                value: 0,
                value2: 0
            },{
                name: '2020',
                value: 0,
                value2: 0
            },{
                name: '2021',
                value: 0,
                value2: 0
            },{
                name: '2022',
                value: 0,
                value2: 0
            },
          ],
        rlzyjjqs: [{
                name: '2018',
                value: 0,
                value2: 0,
                value3: 0,
            },{
                name: '2019',
                value: 0,
                value2: 0,
                value3: 0,
            },{
                name: '2020',
                value: 0,
                value2: 0,
                value3: 0,
            },{
                name: '2021',
                value: 0,
                value2: 0,
                value3: 0,
            },{
                name: '2022',
                value: 0,
                value2: 0,
                value3: 0,
            },
            ],
          jzjjqs: [{
                name: '2018',
                value: 0,
                value2: 0,

            },{
                name: '2019',
                value: 0,
                value2: 0,

            },{
                name: '2020',
                value: 0,
                value2: 0,

            },{
                name: '2021',
                value: 0,
                value2: 0,

            },{
                name: '2022',
                value: 0,
                value2: 0,
            },
            ]
      },*/
      showWarn: false,
      videoTalent: {
        zyrc: 0,
        ptry: 0,
        qzyy: 0
      },
      totalInfo: {
        zyrc_mb: 0,
        ptry_mb: 0,
        qzyy_mb: 0
      },
      showTooltip: false,
      tooltipData: {
          qyslxj: 80,
          qysllxxj: 60,
          dqpsjzsl: 20,
          jnljrzjzsl: 50,
          qyzctbxj: 40,
          cyryyqyppzxj: 90
      },
      jzInfo: {
          ljjzs:500,
          ljjzrs:10
      },
      videoEconomy: {
        hdcp: 0,
        cyss: 0,
      },
      totalInfo2: {
        hdcp_mb: 0,
        cyss_mb: 0,
      },
      rlzyfzzs: 71.5,
      /*activeList: {
        rcqz: {
          qy_zphcs: 0,
          qy_gws: 0,
          rc_bms: 0,
          rc_yxrs: 0
        },
        fzhj: {
          qy_zcsl: 0,
          qy_btje: 0,
          rc_btzc: 0,
          rc_zchjrs: 0,
          rc_rjbtje: 0
        },
        rcjg: {
          qy_ycqys: 0,
          qy_jlqyycje: 0,
          rc: [{
              name: '博士',
              count: 0,
            },{
              name: '硕士',
              count: 0,
            },{
              name: '本科',
              count: 0,
            },{
              name: '专科',
              count: 0,
            }]
        },
      },
*/
      professionalInfo: {
        jobCount: '1234',
        jobNeedCount: '98',
        ratio: '1.2',
        lackCount: 123412,
        list: [{
          name: '岗位1',
          value: '123',
          ratio: '1.1'
        },{
          name: '岗位2',
          value: '890',
          ratio: '1.03'
        },{
          name: '岗位3',
          value: '1212',
          ratio: '1.32'
        },{
          name: '岗位4',
          value: '455',
          ratio: '1.89'
        },{
          name: '岗位5',
          value: '455',
          ratio: '1.89'
        },{
          name: '岗位6',
          value: '455',
          ratio: '1.89'
        },{
          name: '岗位7',
          value: '455',
          ratio: '1.89'
        }]
      },
      ratio: 30,
      yjqyxq:1212,
      ptryjq:503,
      rjfw:68 ,
      supportInfo: {
        count: '192834',
        percentage: 50
      },
      warnData: {
        module1: {
          value1: 0,
          value2: 0,
          list: [{
            name: '1月',
            value: 0,
          },{
            name: '3月',
            value: 0,
          },{
            name: '3月',
            value: 0,
          },{
            name: '4月',
            value: 0,
          },{
            name: '5月',
            value: 0,
          }]
        },
        module2:{
          value1: 0,
          value2: 0,
          legend: ['2021年入驻数', '2022年入驻数', '当前拍摄剧组数'],
          list:[{
            name: '1月',
            value1: 0,
            value2: 0,
            value3: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
            value3: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
            value3: 0,
          },{
            name: '4月',
            value1: 0,
            value2: 0,
            value3: 0,
          },{
            name: '5月',
            value1: 0,
            value2: 0,
            value3: 0,
          }]
        },
        module3: {
          value1: 0,
          value2: 0,
          legend1: ['2021年', '2022年'],
          // 从业人员           从业人员与企业匹配值
          legend2: ['从业人员', '从业人员与企业匹配值'],
          list1:[{
            name: '1月',
            value1: 0,
            value2: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
          },{
            name: '4月',
            value1: 0,
            value2: 0,
          },{
            name: '5月',
            value1: 0,
            value2: 0,
          }],
          list2:[{
            name: '1月',
            value1: 0,
            value2: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
          },{
            name: '3月',
            value1: 0,
            value2: 0,
          },{
            name: '4月',
            value1: 0,
            value2: 0,
          },{
            name: '5月',
            value1: 0,
            value2: 0,
          }]
        }
      },
      hyzsdata:{
        rcxqdata:[
          {name:'专业人才需求数',value:1505,percent:30},
          {name:'群演需求数',value:263960,percent:50},
          {name:'配套人员需求数',value:1078,percent:30}
        ],
        rcgqdata:[
          {name:'专业人才入职数',value:756,percent:30},
          {name:'群演安排数',value:263960,percent:50},
          {name:'配套人员入职数',value:575,percent:30}
        ],
        rczcdata:[
          {name:'人才政策数',value:14,percent:50,unit:'个'},
          {name:'奖补金额',value:2100,percent:20,unit:'万'},
          {name:'政策惠及人数',value:820,percent:30,unit:'人'}
        ],
        rcfwdata:[
          {name:'人才招聘会场次',value:17,percent:50,unit:'次'},
          {name:'提供岗位数',value:23571,percent:20,unit:'个'},
          {name:'群演工伤参保率',value:100,percent:30,unit:'%'}
        ],
        xlchartdata:[
          {name:'博士',value:7},
          {name:'硕士',value:201},
          {name:'本科',value:2167},
          {name:'专科',value:3564},
          {name:'专科以下',value:90766}
        ],
        nlchartdata:[
          {name:'30岁以下',value:19341,percent:20},
          {name:'30-40岁',value:33847,percent:35},
          {name:'40-49岁',value:36748,percent:38},
          {name:'50-60岁',value:4835,percent:5},
          {name:'60岁以上',value:1934,percent:2}
        ]
      },
      // 紧缺度弹窗
      jqddata:[
          {

          }
      ]
      /*warnData: {
        "module1": {
          "value2": "89",
          "value1": "86",
          "list": [
            {
              "name": "202202",
              "value": "1505"
            },
            {
              "name": "202203",
              "value": "1491"
            },
            {
              "name": "202204",
              "value": "1484"
            },
            {
              "name": "202205",
              "value": "1487"
            },
            {
              "name": "202206",
              "value": "1476"
            }
          ]
        },
        "module3": {
          "legend2": [
            "从业人员",
            "从业人员与企业匹配值"
          ],
          "list1": [
            {
              "name": "202202",
              "value": "426"
            },
            {
              "name": "202203",
              "value": "817"
            },
            {
              "name": "202204",
              "value": "191"
            },
            {
              "name": "202205",
              "value": "340"
            },
            {
              "name": "202206",
              "value": "1145"
            }
          ],
          "legend1": [
            "2021年",
            "2022年"
          ],
          "value2": "94",
          "value1": "93",
          "list2": [
            {
              "name": "202202",
              "value": "7.6"
            },
            {
              "name": "202203",
              "value": "6.9"
            },
            {
              "name": "202204",
              "value": "4.3"
            },
            {
              "name": "202205",
              "value": "4.7"
            },
            {
              "name": "202206",
              "value": "5.3"
            }
          ]
        },
        "module2": {
          "value2": "92",
          "value1": "91",
          "legend": [
            "2021年入驻数",
            "2022年入驻数",
            "当前拍摄剧组数"
          ],
          "list": [
            {
              "value2": "18",
              "value1": "25",
              "value3": "26",
              "name": "202202"
            },
            {
              "value2": "21",
              "value1": "39",
              "value3": "45",
              "name": "202203"
            },
            {
              "value2": "21",
              "value1": "35",
              "value3": "57",
              "name": "202204"
            },
            {
              "value2": "21",
              "value1": "32",
              "value3": "62",
              "name": "202205"
            },
            {
              "value2": "19",
              "value1": "29",
              "value3": "68",
              "name": "202206"
            }
          ]
        }
      }*/
    }
  },
  mounted() {
    this.getData(0, this.pageSize);
    if(!sessionStorage.getItem('accessToken')) {
        this.$router.replace('/login');
    }
    this.showpie('xlchart',this.hyzsdata.xlchartdata)
    this.resetData()
    setInterval(() => {
      this.resetData()
    }, 1000*60);
  },
  methods: {
    // 打开专业人员紧缺弹窗
    openDialog() {
        this.visible = true;
    },
    // 获取专业人员紧缺弹窗数据
    getData(startIndex, endIndex) {
        this.pageData = [];
        for (const item of result) {
            this.pageData = result.slice(startIndex, endIndex);
        }
    },
    // 专业人员紧缺弹窗数据分页的回调
    handlePageChange(page) {
        this.getData((page - 1) * this.pageSize, page * this.pageSize);
    },
    array2obj (array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },

    showpie(ref,data){
      let color = ['#0884FF', '#65D2FF', '#30D158', '#FFA00A', '#FF453A', '#E06DFF', '#C900FF']
      let objData = this.array2obj(data, 'name')
      let sum = 0;
      data.map(item=>{
        sum+=item.value
      })
      console.log(objData)
      let option= {
        // title: {
        //   text: '{name|总支出}\n{value|' + sum + '}\n{unit|亿元}',
        //   textAlign: 'center',
        //   left: '18%',
        //   top: '30%',
        //   textStyle: {
        //     rich: {
        //       name: {
        //         color: '#fff',
        //         fontSize: 16
        //       },
        //       value: {
        //         height: 40,
        //         color: '#fff',
        //         fontSize: 20,
        //         fontFamily: 'DINPro-Medium'
        //       },
        //       unit: {
        //         fontSize: 16,
        //         color: 'rgba(255,255,255,0.72)'
        //       }
        //     }
        //   }
        // },
        legend: {
          top: '10%',
          left: '50%',
          itemWidth: 10,
          itemHeight: 10,
          icon: 'rect',
          data: data,
        //  itemGap: 30,
          // orient: 'vertical',
          formatter: function (name) {
            console.log(name)
            let per = ((objData[name].value/sum)*100).toFixed(0)
            return '{title|' + name + '} {value|' + objData[name].value + '人}'
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
              },
              value: {
                fontFamily: 'DINPro-Medium',
                fontSize: 14,
                color: '#64E6E2',
                align: 'left',
              },
              unit: {
                fontFamily: 'SourceHanSansCNB',
                fontSize: 16,
                color: 'rgba(255,255,255,0.72)',
                padding: [12, 0, 0, 0]
              }
            }
          }
        },
        series: [{
          type: 'pie',
          center: ['25%', '52%'],
          radius: ['75%', '93%'],
          itemStyle: {
            color: params => color[params.dataIndex]
          },
          labelLine: {
            show: false
          },
          label: {
            show: true,
            position: 'center',
            fontSize: 14,
            lineHeight: 28,
            color: 'rgba(255,255,255,0.8)',
            formatter: params => {
              let str = `{per| ${params.percent}%}\n{name|${params.name}}`
              return str
            },
            rich: {
              name: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.88)'
              },
              per: {
                fontSize: 20,
                color: '#fff',
                fontWeight: 'bold',
                fontFamily: 'DINPro-Medium'
              }
            }
          },
          z: 3,
          data: data.map(item => {
            return {
              ...item,
              emphasis: {
                label: {
                  show: false
                }
              }
            }
          })
        }]
      }
      let myChart = echarts.init(document.getElementById(ref));
      myChart.setOption(option)
    //let myChart = this.$echarts.init(this.$refs[ref][0], null, {renderer: 'svg'})

    },
    resetData() {
      let params = {"areaCode":"330783"};
      let url ='/dyrl/screen/query/xtzs'
    //  let url='http://localhost:9090/dyrl/screen/query/xtzs'
      console.log('调用接口');
      this.$api.commonPost(url,params).then(res=>{

        if(res.data.code === 0){
          console.log(res.data.result);
          this.jjzs=res.data.result.jjzs;
          this.jjyc=res.data.result.jjyc;
          this.jzjjdudata=res.data.result.jzjjdudata;

          this.videoTalent =res.data.result.videoTalent;
          this.totalInfo = res.data.result.totalInfo;
          this.jzInfo = res.data.result.jzInfo;
          this.videoEconomy = res.data.result.videoEconomy;
          this.totalInfo2 = res.data.result.totalInfo2;
          this.rlzyfzzs =res.data.result.rlzyfzzs;
          //this.hyzsdata = res.data.result.hyzsdata;
          this.professionalInfo = res.data.result.professionalInfo;
          this.ratio =  res.data.result.ratio;
          this.yjqyxq=res.data.result.yjqyxq;
          this.ptryjq=res.data.result.ptryjq;
          this.rjfw=res.data.result.rjfw;
          //this.supportInfo =res.data.result.supportInfo;
          this.warnData =res.data.result.warnData;
          this.tooltipData =res.data.result.tooltipData;;
          /*this.warnData.module1.value2=97
          this.warnData.module1.value1=1
          this.warnData.module2.value2=59
          this.warnData.module2.value1=80
          this.warnData.module3.value1=47
          this.warnData.module3.value2=112
          this.tooltipData.qyslxj=1
          this.tooltipData.qysllxxj=97
          this.tooltipData.dqpsjzsl=80
          this.tooltipData.jnljrzjzsl=59
          this.tooltipData.qyzctbxj=47
          this.tooltipData.cyryyqyppzxj=112*/
        }else{
          this.$message({
            type: 'error',
            message: res.data.code,
            duration: 1500
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.videobg{
  width: 1208px;
  height: 640px;
  position: absolute;
  left: 356px;
  top: 120px;
  mix-blend-mode: screen;
  z-index: 1;
}
.flex {
  display: flex;
}
.qyjqdbox{
  width:246px;
  height:212px;
  background: url("../assets/qyjqbg.svg") no-repeat left top;
  padding:20px 10px;
}
.rjfwbox{
  width:180px;
  height:180px;
  background: url("../assets/ptryjq.svg") no-repeat center top;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  h2{
    font-family: DINPro-Medium;
    font-size: 32px;
    color: #64E6E2;
    letter-spacing: 1.92px;
    text-align: center;
    line-height: 50px;
    font-weight: 500;
    padding-top:40px;
  }
  p{
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    text-align: center;
    padding-top:20px;
  }
}
.pad20 {
  padding: 20px;
}
.mLeft {
  background-image: linear-gradient(180deg, rgba(8,132,255,0.00) 0%, rgba(8,132,255,0.12) 100%);
}

.img {
  width: 48px;
  height: 48px;
  background-image: url('../assets/yujing_normal.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  position: absolute;
  cursor: pointer;
  bottom: 30px;
  right: 50px;
  &:hover {
    background-image: url('../assets/yujing_cur.svg');
  }
}
.center_top {
  height: 640px;
  margin-left: 20px;
  position: relative;
  margin-top: 10px;
  .side {
    position: relative;
    height: 438px;
    //background-image: url('../assets/center_top_left.png');
    //background-repeat: no-repeat;
    //background-size: 258px 100%;
    &::before {
      content: " ";
      position: absolute;
      width: 258px;

      height: 438px;
      //background-image: url('../assets/center_top_right.png');
      //background-repeat: no-repeat;
      //background-size: 258px 100%;
      //right: 0;
    }
  }
  video {
    width: 100%;
    height: 640px;
    position: absolute;
    left: 0;
    top: 0;
    mix-blend-mode: screen;
  }
  .number {
    position: absolute;
    top: calc(16%);
    left: 40%;
    text-align: center;

    .value {
      font-family: LetsgoDigital-Regular;
      font-size: 72px;
      color: #64E6E2;
      letter-spacing: 0;
      font-weight: 700;
    }
    .label {
      font-family: PingFangSC-Regular;
      font-size: 20px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
}
.center_bottom {
  margin-left: 20px;
  padding: 20px;
  background-image: linear-gradient(180deg, rgba(8,132,255,0.00) 0%, rgba(8,132,255,0.16) 100%);
  display: flex;
  box-sizing: border-box;
}
.right_top {
  position: relative;
  box-sizing: border-box;
  height: 280px;
}
.group_info {
  flex:1;
  text-align:left;
  display: flex;
  flex-direction: column;
  //justify-content: center;
  margin-right:20px;

  .total {
    background: rgba(8,132,255,0.24);
    width: 100%;
    height: 16px;
    margin-top: 10px;
    position: relative;
    &::before {
      content: " ";
      height: 8px;
      position: absolute;
      width: 60%;
      top: 4px;
      left: 4px;
      background-image: linear-gradient(270deg, #0884FF 0%, #0884FF 100%);
    }
  }
  .ratio {
    background: rgba(8,132,255,0.24);
    width: 100%;
    height: 16px;
    margin-top: 10px;
    position: relative;
    &::before {
      content: " ";
      height: 8px;
      position: absolute;
      width: var(--ratio);
      top: 4px;
      left: 4px;
      background-image: linear-gradient(270deg, #FF453A 0%, #0884FF 100%);
    }
  }
}
.progressbox{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .progresscontent{
  }
  .progressbarbox{
    width:100%;
    height:16px;
    background: rgba(8,132,255,0.24);
    position: relative;
    .progressbarcur{
      height:8px;
      width:0;
      position: absolute;
      left:4px;
      top:4px;
      background-image: linear-gradient(270deg, #64E6E2 0%, #0884FF 100%);
    }
  }
}
.txtbox{
  p{
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    span{
      font-family: DINPro-Medium;
      font-size: 20px;
      color: #FFFFFF;
      letter-spacing: 1.2px;
      &.bluekey{
        font-size: 16px;
        color: #64E6E2;
        letter-spacing: 0.96px;
        font-weight: 600;
        padding:0 5px;
      }
    }
    b{
      color: rgba(255,255,255,.7);
      font-weight: normal;
    }
  }
}
.flexbetween{
  display: flex;
  justify-content: space-between;
}
.bottomsidebox{
  width:552px;
  margin-top:-10px;
  //height:260px;
  //display: flex;
  //flex-direction: column;
  //justify-content: space-between;
}
.bottommidbox{
  width:592px;
  margin-top:-10px;
  //height:260px;
  //display: flex;
  //flex-direction: column;
  //justify-content: space-between;
}
.subbox{
  flex: 1;
  h2{
    height:24px;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    text-align: center;
    line-height: 24px;
    font-weight: 600;
    background-image: linear-gradient(269deg, rgba(0,178,255,0.00) 0%, rgba(8,132,255,0.24) 51%, rgba(0,178,255,0.00) 100%);
    margin:10px auto;
  }
  .progressbox{

    .progresscontent{
      .progressbarbox{
        height:8px;
        background: rgba(8,132,255,0.24);
        position: relative;
        .progressbarcur{
          height:4px;
          width:0;
          position: absolute;
          left:2px;
          top:2px;
          background-image: linear-gradient(270deg, #64E6E2 0%, #0884FF 100%);
          &.orange{
            background-image: linear-gradient(270deg, #FF453A 0%, #FFA00A 100%);
          }
        }
      }
      .txtbox{
        p{
          line-height: 24px;
          text-align: left;
          font-size: 16px;
          color: #FFFFFF;
          letter-spacing: 0.96px;
          margin: 0;
          padding: 0;
          span{
            font-family: DINPro-Medium;
            font-size: 20px;
            color: #FFFFFF;
            letter-spacing: 1.2px;
            &.bluekey{
              font-size: 16px;
              color: #64E6E2;
              letter-spacing: 0.96px;
              font-weight: 600;
              padding:0 5px;
            }
          }
          b{
            color: rgba(255,255,255,.7);
            font-weight: normal;
          }
        }
      }
    }
  }
  .progressHbox{
    width:24px;
    height:152px;
    background: rgba(8,132,255,0.24);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left:5px;
    .progressHcontent{
      width:16px;
      margin:2px auto;
      &:nth-child(1){
        background: #FF453A;
      }
      &:nth-child(2){
        background: #FFA00A;
      }
      &:nth-child(3){
        background: #30D158;
      }
      &:nth-child(4){
        background: #65D2FF;
      }
      &:nth-child(5){
        background: #0884FF;
      }
    }
  }
  .listledbox{
    flex:1;
    margin-left: 40px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .listledcontent{
      display: flex;
      position: relative;
      p{
        margin:0;
        padding: 0;
        color:#fff;
        font-size:16px;
        padding-right:5px;
        &:nth-child(1){
          padding-left: 20px;
        }
        span{
          font-family: DINPro-Medium;
          font-size: 16px;
          color: #64E6E2;
          letter-spacing: 0.96px;
          font-weight: 600;
        }
        b{
          color:rgba(255,255,255,.7);
          font-weight: normal;
        }
      }
      &:nth-child(1):before{
        content:'';
        width:8px;
        height:8px;
        position: absolute;
        left:0;
        top:8px;
        background: #FF453A;
      }
      &:nth-child(2):before{
        content:'';
        width:8px;
        height:8px;
        position: absolute;
        left:0;
        top:8px;
        background: #FFA00A;
      }
      &:nth-child(3):before{
        content:'';
        width:8px;
        height:8px;
        position: absolute;
        left:0;
        top:8px;
        background: #30D158;
      }
      &:nth-child(4):before{
        content:'';
        width:8px;
        height:8px;
        position: absolute;
        left:0;
        top:8px;
        background: #65D2FF;
      }
      &:nth-child(5):before{
        content:'';
        width:8px;
        height:8px;
        position: absolute;
        left:0;
        top:8px;
        background: #0884FF;
      }
    }

  }
}
.chartbox {
  height: 145px;
  position: relative;
  &.yzjzbox {
    width: 100%;
    height: 145px;
   background: url(../assets/piebg.svg) no-repeat 0 top /145px 145px;
    position: relative;
    .yzjzcircle {
      width: 100px;
      height: 100px;
      background: url(../assets/pied.png) no-repeat center / 100px 100px;
      position: absolute;
      left: 25px;
      top: 23px;
      animation: rotate1 3s linear infinite forwards;
    }
  }
  &.yzjzbox2 {
    width: 100%;
    height: 150px;
   background: url(../assets/piebg.svg) no-repeat left top /150px 150px;
    position: relative;
  }
}
.tooltipbox{
  width:40px;
  height:40px;
  background:url("../assets/tooltip.svg") no-repeat center;
  cursor: pointer;
}
.popbox{
  width:230px;
  height:230px;
  position: absolute;
  right:0;
  background-color: #01182A;
  background-image: url("../assets/lefttop.svg"),url("../assets/righttop.svg"),url("../assets/leftbottom.svg"),url("../assets/rightbottom.svg"),;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
  background-position: left top,right top,left bottom,right bottom;
  border: 1px solid rgba(35,81,184,1);
  z-index: 99;
  .popcontent{
    padding:20px;
    height:210px;
    overflow: auto;
    p{
      line-height: 24px;
      margin:0;
      padding-left:10px;
      font-size:16px;
      color:#fff;
      text-align: left;

    }
  }

}
.popbox h2{
  width:100%;
  height:40px;
  line-height: 40px;
  font-size: 18px;
  margin:0;
  padding:0;
  background-image: linear-gradient(269deg, rgba(0,178,255,0.00) 0%, rgba(8,132,255,0.24) 51%, rgba(0,178,255,0.00) 100%);
}
@keyframes rotate1{
  0%{
    transform: rotate(0) scale(1);
  }
  100%{
    transform: rotate(-360deg) scale(1);
  }
}

.wrapper {
  width: 552px;
  color: #FFFFFF;
}

.center {
  text-align: center;
}

.pagination {
  margin: 20px 20px 0 20px;
}

::v-deep .el-dialog__body {
  background-color: #041524;
}

::v-deep .el-dialog__header {
  background-color: #041524;
}

::v-deep .el-dialog__title {
  color: #FFFFFF;
}
</style>
